<template>
  <view class="search-bar">
    <view class="location" @tap="chooseLocation">
      <text>{{ location }}</text>
      <text class="icon">▼</text>
    </view>
    <view class="search-input" @tap="goSearch">
      <image class="icon" src="/static/images/icon/search.png"></image>
      <text class="placeholder">搜索商品</text>
    </view>
    <view class="login" @tap="goLogin" v-if="!isLoggedIn">
      登录
    </view>
  </view>
</template>

<script setup>
defineProps({
  location: {
    type: String,
    default: '北京'
  },
  isLoggedIn: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['chooseLocation', 'goSearch', 'goLogin'])

const chooseLocation = () => {
  emit('chooseLocation')
}

const goSearch = () => {
  emit('goSearch')
}

const goLogin = () => {
  emit('goLogin')
}
</script>

<style scoped>
.search-bar {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background: #e1251b;
}

.location {
  color: #fff;
  font-size: 28rpx;
  margin-right: 20rpx;
  display: flex;
  align-items: center;
}

.search-input {
  flex: 1;
  height: 64rpx;
  background: #fff;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
}

.search-input .icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}

.search-input .placeholder {
  color: #999;
  font-size: 28rpx;
}

.login {
  color: #fff;
  font-size: 28rpx;
  margin-left: 20rpx;
}
</style> 